import React, {useState} from 'react'

import {Form, Button, Input, Divider, Switch, Row, Col} from 'antd'

import {Container} from './style'

function HomeAdmin(){
    const [form] = Form.useForm()
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 8 },
    }
    const tailLayout = {
        wrapperCol: { offset: 6, span: 8 },
    }
    const [confirmLoading, setConfirmLoading] = useState(false)
    const confirmModify = () => {

    }
    return (
        <Container>
            <Row align="middle">
                <Col span={8} style={{textAlign: 'right', marginRight: '20px'}}>是否开启首页推荐:</Col>
                <Col span={8}>
                    <Switch checkedChildren="开" unCheckedChildren="关"></Switch>
                </Col>
            </Row>
            <Divider></Divider>
            <Form
                form={form}
                {...layout}
                onFinish={confirmModify}
            >
                <Form.Item
                    label="标题"
                    name="title"
                    rules={[{ required: true, message: '请填写文章标题!' }]}
                >
                    <Input placeholder="请填写文章标题" style={{width: 220}}/>
                </Form.Item>
                <Form.Item
                    label="简单描述"
                    name="desc"
                    rules={[{ required: true, message: '请填写文章描述!' }]}
                >
                    <Input.TextArea rows={3} placeholder="请填写文章描述" style={{width: 320}}/>
                </Form.Item>
                <Form.Item
                    label="作者"
                    name="author"
                    rules={[{ required: true, message: '请填写作者!' }]}
                >
                    <Input placeholder="请填写作者" style={{width: 220}}/>
                </Form.Item>
                <Form.Item
                    label="文章链接"
                    name="link"
                    rules={[{ required: true, message: '请填写文章链接!' }]}
                >
                    <Input placeholder="请填写文章链接" style={{width: 220}}/>
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit" loading={confirmLoading}>
                        确 认
                    </Button>
                </Form.Item>
            </Form>
        </Container>
    )
}

export default HomeAdmin